@charset "utf-8";
@import "common";
$unit:1px;
$white:rgb(255,255,255);
$black:rgb(0,0,0);
$theme-color:rgb(41, 176, 120);
 body{
   background-color:rgb(250,250,250);
 }
.main-jobs {
	.nav-pills{
		border-top: 1px solid #ccc;
		border-bottom:1px solid #ccc;
		padding:15px 0;
		font-size:14px;
		li+li {
		margin-left:10px;
		}
		li>a {
		    border-radius: 0;
		    padding:4px;
		    color:$black;
		    font-size:14px;
		}
	    &>li.active>a,&>li.active>a:focus,&>li.active>a:hover {
		    color: #fff;
		    background-color: $theme-color;
		}
	}
	.nav>li>a:focus, .nav>li>a:hover {
		    background-color: $theme-color;
		    color:#fff;
	}
	


}


 .job-group h3{
    border-bottom:1px solid #ccc;
    line-height:3;
    font-size:16px;
 }
.job-group-item {
   padding:0;
   .item-wrap{
	  	background:white;
	  	width:94%;
	  	margin:3% auto;
	  	position:relative;
	  	overflow: hidden;
	 	word-break:break-all;
	  	border-radius:5px;
	 	box-shadow:0 1px 1px #ddd,0 -1px 1px #ddd,1px 0 1px #ddd,-1px 0 #ddd;
	  	.job-detail{
	  		position:absolute;
	  		top:0;
	  		left:0;
	  		width:100%;
	  		height:100%;
	  		padding:40px 20px;
	  		background-color:rgba(0,0,0,.8);
	  		border-radius:5px;
	  		color:white;
	  		opacity:0;
	  		&:hover,&.active{
	  			opacity:1;
	  		}
	  		h4{
	  			text-align:center;
	  		}
	  		p{
	  			text-indent:2em;
	  			line-height:1.5;
	  		}



	  	}
  	}
		  table{
		  	width:101%;
		 	line-height:2.5;
		 	font-size:12px;

		 	span,p,h4{
		 		padding:0 10px;
		 	}
		 	strong{
		 		color: rgb(240, 20, 0);
		 	}
		  	.job-intro{
		  		font-size:14px;

		  	}
		  	tr{
		  		width:100%;
		  		td{
		  			border: 2px solid #fafafa;
		  		}
		  		.col-left{
				    width: 35%;
				    float: left;
				    text-align: center;
		  		}
		  		.thumbnail{
		  			border:none;
		  			border-radius:0;
		  		}
		  		.pay{
		  			line-height:7.5;
		  		}
		  		.col-right1,.col-right2{
		  			float: right;
		  			width:65%;
		  		}
		  		.col-right1{
		  			p{
		  				line-height:1.5;
		  			}
		  		}
		  		.col-right2{
					border-left: 2px solid #fafafa;
					.col-right2-row{
						border-bottom:2px solid #fafafa;
						width:100%;
					}
					.col-right2-row3{
						border-bottom:none;
					}

		  		}
		  	}
		  }
}


// 动画创建
@keyframes job-detail-animation
{
0%   {background-color:rgba(255,255,255,.1);opacity:.1;color:rgb(200,200,200);}
25%  {background-color:rgba(200,200,200,.2);opacity:.3;color:rgb(220,220,220);}
50%  {background-color:rgba(80,80,80,.35);opacity:.6;color:rgb(240,240,240);}
75%  {background-color:rgba(0,0,0,.7);opacity:.8;color:rgb(250,250,250);}
100% {background-color:rgba(0,0,0,.75);opacity:1;color:rgb(255,255,255);}
}

@-moz-keyframes job-detail-animation /* Firefox */
{
0%   {background-color:rgba(255,255,255,.1);opacity:.1;color:rgb(200,200,200);}
25%  {background-color:rgba(200,200,200,.2);opacity:.3;color:rgb(220,220,220);}
50%  {background-color:rgba(80,80,80,.35);opacity:.6;color:rgb(240,240,240);}
75%  {background-color:rgba(0,0,0,.7);opacity:.8;color:rgb(250,250,250);}
100% {background-color:rgba(0,0,0,.75);opacity:1;color:rgb(255,255,255);}
}

@-webkit-keyframes job-detail-animation /* Safari 和 Chrome */
{
0%   {background-color:rgba(255,255,255,.1);opacity:.1;color:rgb(200,200,200);}
25%  {background-color:rgba(200,200,200,.2);opacity:.3;color:rgb(220,220,220);}
50%  {background-color:rgba(80,80,80,.35);opacity:.6;color:rgb(240,240,240);}
75%  {background-color:rgba(0,0,0,.7);opacity:.8;color:rgb(250,250,250);}
100% {background-color:rgba(0,0,0,.75);opacity:1;color:rgb(255,255,255);}
}

@-o-keyframes job-detail-animation /* Opera */
{
0%   {background-color:rgba(255,255,255,.1);opacity:.1;color:rgb(200,200,200);}
25%  {background-color:rgba(200,200,200,.2);opacity:.3;color:rgb(220,220,220);}
50%  {background-color:rgba(80,80,80,.35);opacity:.6;color:rgb(240,240,240);}
75%  {background-color:rgba(0,0,0,.7);opacity:.8;color:rgb(250,250,250);}
100% {background-color:rgba(0,0,0,.75);opacity:1;color:rgb(255,255,255);}
}

// 动画调用

.job-detail:hover{
	animation:job-detail-animation 3s;
	-moz-animation:job-detail-animation 3s; /* Firefox */
	-webkit-animation:job-detail-animation 3s; /* Safari and Chrome */
	-o-animation:job-detail-animation 3s; /* Opera */
}

	  		
